<template>
  <div>
    <el-dialog v-dialogDrag title="上传文档" :visible="isShowUpload" width="40%" @close="dialogClose"
      :close-on-click-modal="false">
      <el-form ref="upload" :model="formFileds" :rules="rules" label-width="auto">
        <el-form-item label="文档名称:" prop="name">
          <el-input v-model="formFileds.name"></el-input>
        </el-form-item>

        <el-form-item label="标准类型:" prop="type">
          <el-select v-model="formFileds.type" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in DocumentTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="文档价格:" prop="price">
          <el-input v-model="formFileds.price"></el-input>
        </el-form-item>

        <el-form-item label="上传文档:" prop="url">
          <el-upload action="/api/document/uploadDocument" :limit="1" :on-success="handleExceed"
            :before-upload="handleBefore" :file-list="fileList" accept=".pdf" :on-change="handleChange">
            <el-button size="small" type="primary">点击上传</el-button>
            <div v-if="show" slot="tip" class="el-upload__tip" style="color: red">
              请上传文档
            </div>
            <div slot="tip" class="el-upload__tip">只能上传pdf格式文件</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitData()" class="pull-right margin-l-25">确定
          </el-button>
          <el-button @click="dialogClose()" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addDocument } from "@/api/systemManage/documentManage";
import { findByName } from "@/api/systemManage/dataDictionary";
export default {
  //接受父组件
  props: {
    isShowUpload: {
      type: Boolean,
    },
  },

  data () {
    return {
      show: false,
      success: false,
      tag: true,
      fileList: [],
      DocumentTypeOptions: [],
      formFileds: {
        name: "",
        type: "",
        price: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入文档名称", trigger: "change,blur" },
        ],
        type: [
          { required: true, message: "请选择文档类型", trigger: "change,blur" },
        ],
        price: [
          { required: true, message: "请输入文档价格", trigger: "change,blur" },
        ],
      },
    };
  },
  methods: {
    dialogClose () {
      this.$emit("dialogClose");
    },
    submitData () {
      this.$refs.upload.validate((valid) => {
        if (!valid) {
          return;
        } else {
          this.formFileds.companyId = 2;
          if (this.tag) {
            this.show = true;
            return;
          } else {
            this.show = false;
            addDocument(this.formFileds).then((res) => {
              this.$emit("close");
              this.$emit("dialogClose");
            });
          }
        }
      });
    },
    // handleExceed(files, fileList) {
    //   this.$message.warning(`当前限制选择 1 个文件`);
    // },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getType () {
      findByName("input=" + "标准类型").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].dictName == '标准类型')
            this.DocumentTypeOptions.push({
              label: res.data[i].dictValue,
              value: res.data[i].dictValue,
            });
        }
      });
    },
    handleChange (file) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const params = new FormData();
      params.append('file', file)
      setTimeout(() => {
        if (this.success) {
          loading.close()
        }
      }, 3000);
    },
    handleBefore (file) {
      this.success = false
      let filetype = file.name.substring(file.name.lastIndexOf(".") + 1);
      let fileSize = file.size / 1024 / 1024;
      if (filetype == "pdf" && fileSize <= 20) {
        return true;
      } else {
        this.success = true
        if (filetype != "pdf") {
          this.$message.error("请上传pdf格式文件！");
        }
        if (fileSize > 20) {
          this.$message.error("文件大小超过了20M！");
        }
        return false;
      }

    },
    handleExceed (file) {
      this.formFileds.url = file.data;
      this.tag = false;
      this.success = true
    },
  },
  mounted () {
    this.getType();
  },
};
</script>

<style lang="less" scoped></style>
